<template>
  <div style="margin-top: 60px; margin-left: 80px;">
    <!-- 搜索表单 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
      style="display: flex; align-items: center; margin-bottom: 20px;"
    >
      <el-form-item label="字段：" prop="key" style="margin-right: 20px; margin-bottom: 0;">
        <el-select v-model="ruleForm.key" style="width: 160px;" placeholder="请选择字段">
          <el-option label="用户名" value="username" />
          <el-option label="姓名" value="name" />
          <el-option label="电话" value="telephone" />
        </el-select>
      </el-form-item>

      <el-form-item label="值：" style="margin-right: 20px; margin-bottom: 0;">
        <el-input v-model="ruleForm.value" placeholder="请输入关键字" style="width: 160px;" />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">搜索</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border stripe style="width: 100%;">
      <el-table-column fixed prop="id" label="ID" width="160" />
      <el-table-column prop="username" label="用户名" width="160" />
      <el-table-column prop="password" label="密码" width="160" />
      <el-table-column prop="name" label="姓名" width="160" />
      <el-table-column prop="gender" label="性别" width="160" />
      <el-table-column prop="telephone" label="联系电话" width="160" />

      <!-- 操作列 -->
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button size="mini" @click="edit(row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="margin-top: 20px; float: right;"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      v-model:current-page="currentPage"
      @current-change="page"
    />
  </div>
</template>

<script>
import dormitoryAdminApi from '@/api/dormitoryAdmin'

export default {
  data() {
    return {
      tableData: [], // 初始化为数组
      currentPage: 1,
      pageSize: 3,
      total: 0,
      ruleForm: {
        key: '',
        value: '',
        page: '',
        size: 3
      },
      rules: {
        key: [{ required: true, message: '请选择字段', trigger: 'change' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.currentPage = 1
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.ruleForm.page = this.currentPage
          dormitoryAdminApi.searchDormitoryAdmin(this.ruleForm)
            .then(resp => {
              this.tableData = resp.data.data.data
              this.total = resp.data.data.total
            })
            .catch(err => {
              console.error('搜索宿管失败:', err)
            })
        }
      })
    },
    page(currentPage) {
      this.currentPage = currentPage
      if (!this.ruleForm.value) {
        dormitoryAdminApi.getDormitoryAdminList(currentPage, this.pageSize)
          .then(resp => {
            this.tableData = resp.data.data.data
            this.total = resp.data.data.total
          })
          .catch(err => {
            console.error('获取宿管列表失败:', err)
          })
      } else {
        this.ruleForm.page = currentPage
        dormitoryAdminApi.searchDormitoryAdmin(this.ruleForm)
          .then(resp => {
            this.tableData = resp.data.data.data
            this.total = resp.data.data.total
          })
          .catch(err => {
            console.error('搜索宿管失败:', err)
          })
      }
    },
    edit(row) {
      this.$router.push('/dormitoryAdminUpdate?id=' + row.id)
    },
    del(row) {
      this.$confirm(`确认删除【${row.username}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dormitoryAdminApi.deleteDormitoryAdmin(row.id)
          .then(resp => {
            if (resp.data.code === 0) {
              this.$alert(`【${row.username}】已删除`, '', {
                confirmButtonText: '确定',
                callback: () => {
                  this.page(this.currentPage) // 删除后刷新当前页
                }
              })
            }
          })
          .catch(err => {
            console.error('删除宿管失败:', err)
            this.$message.error('删除宿管失败')
          })
      })
    }
  },
  created() {
    dormitoryAdminApi.getDormitoryAdminList(1, this.pageSize)
      .then(resp => {
        this.tableData = resp.data.data.data
        this.total = resp.data.data.total
      })
      .catch(err => {
        console.error('获取宿管列表失败:', err)
      })
  }
}
</script>
